<script setup>
import { ref } from 'vue'

const light =
    'M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z',
  dark =
    'M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z'
const svgPath = ref(light)
const themeParam = ref(1)

const toggleTheme = () => {
  switch (themeParam.value) {
    case 1:
      themeParam.value = 2
      svgPath.value = dark
      document.documentElement.className = 'dark'
      break
    case 2:
      themeParam.value = 1
      svgPath.value = light
      document.documentElement.className = ''
      break
  }
}

</script>

<template>
  <header class="header">
    <!-- theme -->
    <div class="toggle-theme" @click="toggleTheme">
      <svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          :d="svgPath"
        ></path>
      </svg>
    </div>
  </header>
</template>

<style lang="less" scoped>
.header {
  text-align: right;
  padding: 10px;
  .toggle-theme {
    display: inline-block;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
}
</style>
